<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <nav-bar title="故事详情" :showBack="true"></nav-bar>

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 故事封面和基本信息 -->
            <view class="story-header">
                <view class="story-cover-large">
                    <text class="story-tag">{{ story.tag }}</text>
                </view>
                <view class="story-header-info">
                    <text class="story-title-large">{{ story.title }}</text>
                    <view class="story-meta-large">
                        <view class="story-author-large">
                            <text>{{ story.author }}</text>
                        </view>
                        <view class="story-stats-large">
                            <text class="story-views">{{ story.views }}阅读</text>
                            <text class="story-likes">{{ story.likes }}喜欢</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 内容导航 -->
            <view class="content-nav">
                <view class="nav-item" :class="{ active: activeTab === 'personal' }" @click="switchTab('personal')">
                    <text>个人故事</text>
                </view>
                <view class="nav-item" :class="{ active: activeTab === 'fiveQuestions' }"
                    @click="switchTab('fiveQuestions')">
                    <text>五道人生</text>
                </view>
                <view class="nav-item" :class="{ active: activeTab === 'keyMoments' }" @click="switchTab('keyMoments')">
                    <text>重要时刻</text>
                </view>
            </view>

            <!-- 个人故事内容 -->
            <view v-if="activeTab === 'personal'" class="tab-content personal-story">
                <view class="story-section">
                    <text class="section-title">{{ story.title }}</text>
                    <text class="story-content-text">{{ story.content }}</text>

                    <!-- 故事图片 -->
                    <view class="story-images">
                        <image v-for="(img, index) in story.images" :key="index" :src="img" mode="aspectFill"
                            class="story-image"></image>
                    </view>
                </view>
            </view>

            <!-- 五道人生内容 -->
            <view v-if="activeTab === 'fiveQuestions'" class="tab-content five-questions">
                <view class="question-card" v-for="(question, index) in fiveQuestions" :key="index">
                    <view class="question-header">
                        <text class="question-number">{{ index + 1 }} 、</text>
                        <text class="question-title">{{ question.title }}</text>
                    </view>
                    <text class="question-answer">{{ question.answer }}</text>
                </view>
            </view>

            <!-- 重要时刻内容 -->
            <view v-if="activeTab === 'keyMoments'" class="tab-content key-moments">
                <!-- 时间轴 -->
                <view class="timeline">
                    <scroll-view scroll-x class="timeline-scroll" show-scrollbar="false" @scroll="onTimelineScroll">
                        <view class="timeline-container">
                            <view v-for="(moment, index) in keyMoments" :key="index" class="timeline-item"
                                :class="{ active: currentMomentIndex === index }" @click="selectMoment(index)">
                                <view class="timeline-dot"></view>
                                <text class="timeline-date">{{ moment.date }}</text>
                            </view>
                        </view>
                    </scroll-view>
                </view>

                <!-- 轮播图 -->
                <swiper class="moments-swiper" :current="currentMomentIndex" @change="onSwiperChange" :autoplay="true"
                    :circular="true" :interval="3000">
                    <swiper-item v-for="(moment, index) in keyMoments" :key="index" class="moment-slide">
                        <view class="moment-card">
                            <image :src="moment.image" mode="aspectFill" class="moment-image"></image>
                            <view class="moment-info">
                                <text class="moment-title">{{ moment.title }}</text>
                                <text class="moment-description">{{ moment.description }}</text>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {
            activeTab: 'personal',
            currentMomentIndex: 0,
            story: {
                id: 1,
                title: '生命的陪伴',
                author: '张阿姨',
                tag: '感人',
                views: '1.2k',
                likes: '98',
                content: '在我生命的最后时光，我想回忆那些陪伴我走过风雨的人们。我的丈夫陪我走过了50年的婚姻，虽然他已经离开我5年了，但我仍能感受到他的存在。我的孩子们，他们各自有着自己的家庭，但从未忘记定期来看望我。我的老朋友们，虽然我们都已年迈，但彼此的关心从未减少。\n\n最让我感动的是我的小孙女，她每周都会来陪我聊天，听我讲那些老故事。她说她想记录下这些故事，让家族的历史不会被遗忘。这让我感到，即使我离开了，我的故事和记忆也会继续存在。\n\n生命中最珍贵的不是财富和成就，而是那些真心陪伴和关爱我们的人。他们给予我的温暖与力量，是我生命中最大的财富。',
                images: [
                    '/static/story-image1.jpg',
                    '/static/story-image2.jpg'
                ]
            },
            fiveQuestions: [
                {
                    title: '【道谢】想感谢的人们',
                    answer: '我的丈夫和我的孩子们。我的丈夫陪我走过了50年的婚姻，给了我无尽的支持和爱。我的孩子们则是我生命的延续，看着他们成长、建立自己的家庭，是我最大的骄傲。'
                },
                {
                    title: '【道歉】倾诉心中歉意',
                    answer: '我最遗憾的是没能和父母多相处一些时间。年轻时忙于工作和家庭，等到想多陪陪他们的时候，他们已经离开了。这教会了我珍惜与亲人相处的每一刻。'
                },
                {
                    title: '【道爱】表达心中的爱',
                    answer: '我最自豪的成就是培养出了三个优秀的孩子。他们不仅在事业上有所成就，最重要的是，他们都成为了善良、正直、有爱心的人。这比任何物质成就都更让我感到满足。'
                },
                {
                    title: '【道别】亲口说声再见',
                    answer: '我想告诉后人，生活中最重要的是爱与被爱。物质的东西会随时间消逝，但爱的记忆和情感会永远留存。珍惜身边的人，多花时间陪伴家人，这些才是真正的财富。'
                },
                {
                    title: '【道愿】诉说人生遗憾',
                    answer: '我认为生命的意义在于连接和传承。我们连接着过去和未来，我们的故事和价值观会通过后代传承下去。每个人的生命都是一个独特的故事，而这些故事共同编织成了人类的历史。'
                }
            ],
            keyMoments: [
                {
                    date: '1950',
                    title: '童年时光',
                    description: '在小村庄度过的快乐童年，那时虽然物质条件艰苦，但家人的爱让一切都变得温暖。',
                    image: '/static/moment-image1.jpg'
                },
                {
                    date: '1968',
                    title: '结婚之日',
                    description: '与丈夫相识、相恋并步入婚姻的殿堂，开始了人生新的篇章。',
                    image: '/static/moment-image2.jpg'
                },
                {
                    date: '1970',
                    title: '第一个孩子出生',
                    description: '第一次当母亲的喜悦与责任，这个小生命的到来彻底改变了我的人生。',
                    image: '/static/moment-image3.jpg'
                },
                {
                    date: '1985',
                    title: '事业高峰',
                    description: '在工作中获得了重要成就，这段经历让我明白了自己的价值和能力。',
                    image: '/static/moment-image4.jpg'
                },
                {
                    date: '2010',
                    title: '金婚纪念',
                    description: '与丈夫一起庆祝50年的婚姻，回顾一路走来的酸甜苦辣，感恩彼此的陪伴。',
                    image: '/static/moment-image5.jpg'
                },
                {
                    date: '2018',
                    title: '现在的生活',
                    description: '享受与家人相处的时光，记录和分享自己的生命故事，希望能给后人留下宝贵的精神财富。',
                    image: '/static/moment-image6.jpg'
                }
            ]
        };
    },
    methods: {
        switchTab(tab) {
            this.activeTab = tab;
        },
        selectMoment(index) {
            this.currentMomentIndex = index;
        },
        onSwiperChange(e) {
            this.currentMomentIndex = e.detail.current;
        },
        onTimelineScroll(e) {
            // 可以在这里处理时间轴滚动逻辑
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
}

.main-content {
    flex: 1;
    padding-bottom: 30rpx;
    height: 84vh;
}

/* 故事头部样式 */
.story-header {
    position: relative;
    margin-bottom: 30rpx;
}

.story-cover-large {
    height: 400rpx;
    background-color: #e0e0e0;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    position: relative;
    border-radius: 0 0 30rpx 30rpx;
    overflow: hidden;
}

.story-tag {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
}

.story-header-info {
    padding: 30rpx;
    background-color: white;
    border-radius: 20rpx;
    margin: -50rpx 30rpx 0;
    position: relative;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.story-title-large {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.story-meta-large {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.story-author-large {
    font-size: 28rpx;
    color: #666;
}

.story-stats-large {
    display: flex;
    gap: 20rpx;
}

.story-views,
.story-likes {
    font-size: 24rpx;
    color: #999;
}

/* 内容导航样式 */
.content-nav {
    display: flex;
    justify-content: space-around;
    background-color: white;
    padding: 20rpx 0;
    margin: 0 30rpx 30rpx;
    border-radius: 15rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.nav-item {
    padding: 15rpx 30rpx;
    border-radius: 10rpx;
    transition: all 0.3s;
}

.nav-item.active {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #333;
}

/* 标签内容样式 */
.tab-content {
    padding: 0 30rpx;
    height: 50%;
}

/* 个人故事样式 */
.story-section {
    background-color: white;
    padding: 30rpx;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
}

.story-content-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30rpx;
    text-align: justify;
}

.story-images {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 20rpx;
}

.story-image {
    width: 330rpx;
    height: 220rpx;
    border-radius: 10rpx;
}

/* 五道人生样式 */
.question-card {
    background-color: white;
    padding: 30rpx;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.question-header {
    margin-bottom: 20rpx;
}

.question-number {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 10rpx;
    display: block;
}

.question-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
}

.question-answer {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    text-align: justify;
}

/* 重要时刻样式 */
.timeline {
    margin: 30rpx 0;
    position: relative;
}

.timeline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2rpx;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-scroll {
    white-space: nowrap;
    height: 120rpx;
    position: relative;
    z-index: 2;
}

.timeline-container {
    display: inline-flex;
    padding: 0 30rpx;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 40rpx;
    position: relative;
    cursor: pointer;
}

.timeline-dot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #ccc;
    margin-bottom: 15rpx;
    transition: all 0.3s;
    position: relative;
    z-index: 3;
}

.timeline-item.active .timeline-dot {
    width: 30rpx;
    height: 30rpx;
    background-color: #4a90e2;
}

.timeline-date {
    font-size: 24rpx;
    color: #999;
    transition: all 0.3s;
}

.timeline-item.active .timeline-date {
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
}

.moments-swiper {
    height: 600rpx;
    margin-top: 30rpx;
}

.moment-slide {
    padding: 10rpx;
}

.moment-card {
    background-color: white;
    border-radius: 15rpx;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.moment-image {
    width: 100%;
    height: 350rpx;
}

.moment-info {
    padding: 30rpx;
}

.moment-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    display: block;
}

.moment-description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
}
</style>